const n = `
<template>
  <s-form label-width="10em" colon="：">
    <s-form-item label="进度条主题">
      <s-radio-group v-model="progressOptions.variant" :options="variantList"></s-radio-group>
    </s-form-item>
    <s-form-item label="进度条状态">
      <s-radio-group v-model="progressOptions.status" :options="statusList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否隐藏文本">
      <s-radio-group
        v-model="progressOptions.withoutLabel"
        :options="withoutLabelList"
      ></s-radio-group>
    </s-form-item>
    <s-form-item label="进度条示例">
      <s-progress
        value="60"
        :variant="progressOptions.variant"
        :status="progressOptions.status"
        :without-label="progressOptions.withoutLabel"
        :style="{ width: '30rem' }"
      ></s-progress>
    </s-form-item>
  </s-form>
</template>

<script lang="ts">
import {
  PROGRESS_STATUS_DEFAULT,
  PROGRESS_STATUS_LABEL,
  PROGRESS_STATUS_OPTIONS,
  PROGRESS_VARIANT_DEFAULT,
  PROGRESS_VARIANT_LABEL,
  PROGRESS_VARIANT_OPTIONS,
} from "@smartcity/simple-ui";
import { Component, Vue } from "vue-property-decorator";

@Component
export default class DefaultProgress extends Vue {
  /**
   * @description: 变体可选项列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly variantList = PROGRESS_VARIANT_OPTIONS.map((variant) => ({
    value: variant,
    label: PROGRESS_VARIANT_LABEL.get(variant),
  }));

  /**
   * @description: 状态可选项列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly statusList = PROGRESS_STATUS_OPTIONS.map((status) => ({
    value: status,
    label: PROGRESS_STATUS_LABEL.get(status),
  }));

  /**
   * @description: 是否显示文本可选项列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly withoutLabelList = [
    { label: "显示文本", value: false },
    { label: "隐藏文本", value: true },
  ];

  /**
   * @description: 进度条可配置项
   * @private
   * @type {Object}
   */
  progressOptions = {
    variant: PROGRESS_VARIANT_DEFAULT,
    status: PROGRESS_STATUS_DEFAULT,
    withoutLabel: false,
  };
}
<\/script>
`; export { n as default };
